<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="680px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改广告媒体' : '添加广告媒体'"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >

    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-form-item label="媒体名称:" prop="name">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.name"
          placeholder="请输入媒体名称"
        />
      </el-form-item>

      <el-form-item label="英文名称（小写）:" prop="e_name">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.e_name"
          placeholder="请输入英文名称"
        />
      </el-form-item>

      <el-form-item label="备注:">
        <el-input
          v-model="form.desc"
          placeholder="请输入备注"
          :rows="3"
          :maxlength="200"
          type="textarea"/>
      </el-form-item>

      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="form.status" prop="status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

    export default {
        name: "Edit",
        props: {
            // 弹窗是否打开
            visible: Boolean,
            // 修改回显的数据
            data: Object
        },
        data() {
            return {
                // 表单数据
                form: Object.assign({}, this.data),
                // 表单验证规则
                rules: {
                    name: [{required: true, message: "请输入媒体名称", trigger: "blur"}],
                    e_name: [{required: true, message: "请输入英文名称", trigger: "blur"}],
                },
                // 提交状态
                loading: false,
                // 是否是修改
                isUpdate: false
            };
        },
        watch: {
            visible(val) {
                if (val) {
                    if (this.data) {
                        this.form = Object.assign({}, this.data)
                        this.isUpdate = true;
                    } else {
                        this.form = {};
                        this.isUpdate = false;
                    }
                }
            }
        },
        methods: {

            /* 保存编辑 */
            save() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$http
                            .post("/BoxAdMedia/edit", this.form)
                            .then(res => {
                                this.loading = false;
                                if (res.data.code === 0) {
                                    this.$message({type: "success", message: res.data.msg});
                                    if (!this.isUpdate) {
                                        this.form = {};
                                    }
                                    this.updateVisible(false);
                                    this.$emit("done");
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch(e => {
                                this.loading = false;
                                this.$message.error(e.message);
                            });
                    } else {
                        return false;
                    }
                });
            },
            /* 更新visible */
            updateVisible(value) {
                this.$emit("update:visible", value);
            }
        }
    };
</script>
